<!--
 * @Author: Liujingjing
 * @Date: 2022-01-08 19:50:01
<<<<<<< HEAD
 * @LastEditTime: 2022-01-10 19:16:08
 * @LastEditors: lk
=======
 * @LastEditTime: 2022-01-10 22:02:05
 * @LastEditors: Liujingjing
>>>>>>> 287267f17dd8b1c8062804a1c32d7fc814a45186
 * @Description: 
 * @FilePath: \am\am-ui\src\pages\extend\Device.vue
 * 可以输入预定的版权声明、个性签名、空行等
-->
<template>
  <div class="device">
    <!-- 设备管理 -->
    <div class="header">
      <el-select
        v-model="onlineStatus"
        clearable
        placeholder="请选择设备在线状态">
        <el-option label="离线" value="离线"></el-option>
        <el-option label="在线" value="在线"></el-option>
      </el-select>
      <el-select
        v-model="bdStatus"
        clearable
        placeholder="请选择设备绑定状态"
        style="margin: 0 10px"
      >
        <el-option
          v-for="item in bdStatusOpt"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>

      <el-input
        placeholder="请输入内容"
        v-model="inputVal"
        clearable
        style="width: 180px"></el-input>

      <el-button type="success" style="margin: 0 10px">搜索</el-button>
      <el-button type="success" style="float: right" @click="showDrawer">录入</el-button>
    </div>
    <!-- 表格 -->
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column
        type="index"
        :index="1"
        label="序号"
        width="90"
        align="center">
      </el-table-column>
      <el-table-column
        prop="serial_number"
        label="编号"
        min-width="100"
        align="center">
      </el-table-column>
      <el-table-column prop="name" label="名称" min-width="100" align="center">
      </el-table-column>
      <el-table-column
        prop="online_status"
        label="在线状态"
        min-width="100"
        align="center">
        <template slot-scope="scope">
          <el-tag type="danger" v-if="scope.row.online_status == 0">
            {{ scope.row.online_status == 0 ? "离线" : "在线" }}
          </el-tag>
          <el-tag type="success" v-if="scope.row.online_status == 1">
            {{ scope.row.online_status == 0 ? "离线" : "在线" }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="bind_status"
        label="绑定状态"
        min-width="100"
        align="center">
        <template slot-scope="scope">
          <el-tag type="danger" v-if="scope.row.bind_status == 0">
            {{ scope.row.bind_status == 0 ? "未绑定" : "已绑定" }}
          </el-tag>
          <el-tag type="success" v-if="scope.row.bind_status == 1">
            {{ scope.row.bind_status == 0 ? "未绑定" : "已绑定" }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="150" align="center">
        <template slot-scope="scope">
          <el-button type="text" @click="editBtn(scope.row)">修改</el-button>
          <el-button type="text" @click="deletBtn(scope.row.id)" style="color: red">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 抽屉 -->
    <el-drawer
      :title="title"
      :visible.sync="drawer"
      direction="rtl"
      :before-close="handleClose"
      size="50%">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
        style="padding: 10px">
        <el-form-item label="编号" prop="serial_number">
          <el-input
            v-model="ruleForm.serial_number"
            style="width: 200px"></el-input>
        </el-form-item>

        <el-form-item label="名称" prop="name">
          <el-input v-model="ruleForm.name" style="width: 200px"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="drawer = false">取消</el-button>
          <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
          <!-- <el-button @click="resetForm('ruleForm')">重置</el-button> -->
        </el-form-item>
      </el-form>
    </el-drawer>
  </div>
</template>
<script>
import { get, postJSON ,del} from "../../utils/request";
export default {
  data() {
    return {
      onlineStatus: "",
      bdStatus: "",
      bdStatusOpt: [
        {
          lable: "未绑定",
          value: "未绑定",
        },
        {
          lable: "已绑定",
          value: "已绑定",
        },
      ],
      inputVal: "",
      tableData: [],
      drawer: false,
      ruleForm: {
        serial_number: "",
        name: "",
        id: "",
      },
      rules: {
        serial_number: [
          { required: true, message: "请输入编号", trigger: "blur" },
        ],
        name: [{ required: true, message: "请输入名称", trigger: "blur" }],
      },
      title: "",
    };
  },
  created() {
    this.getDeviceList();
  },
  methods: {
    //查询设备列表
    getDeviceList() {
      get("http://8.130.15.199:7001/device/pageQuery", {
        page: 1,
        pageSize: 10,
        name: "",
        bind_status: "",
        online_status: "",
      }).then(res => {
        if (res && res.status == 200 && res.data && res.data.list) {
          this.tableData = res.data.list;
        } else {
          this.tableData = [];
        }
      });
    },

    //修改设备信息
    editBtn(row) {
      console.log(7777,row)
      this.drawer = true;
      this.title = "修改设备信息";
      this.ruleForm = {
        serial_number:row.serial_number,
        name:row.name,
        id:row.id,
      };
    },
    //添加保存或更新设备
    addDevice() {
      postJSON("http://8.130.15.199:7001/device/saveOrUpdate", this.ruleForm).then(
        res => {
          console.log(8888, res);
        }
      );
    },
    //删除
    deletBtn(id){
      del('http://8.130.15.199:7001/device/deleteById',{
        id:id
      }).then(res=>{
        console.log(666,res)
        if(res && res.status == 200){
          this.$notify({
                title: '成功',
                message: '设备信息删除成功',
                type: 'success'
              });
              this.getDeviceList()
        }else{
          this.$notify.error({
                title: "警告",
                message: "设备信息删除失败",
              });
        }
      })
    },
    //打开抽屉
    showDrawer() {
      this.drawer = true;
      this.title = "添加设备信息";
      this.ruleForm = {};
      // this.$refs['ruleForm'].resetFields();
    },
    //关闭抽屉
    handleClose(done) {
      done();
      // this.$refs[ruleForm].resetFields();
    },
    //提交
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          postJSON(
            "http://8.130.15.199:7001/device/saveOrUpdate",
            this.ruleForm
          ).then(res => {
            console.log(8888, res);
            if (res && res.status == 200) {
              if (this.ruleForm.id) {
                this.$notify({
                  title: "成功",
                  message: "设备信息修改成功",
                  type: "success",
                });
              } else {
                this.$notify({
                title: '成功',
                message: '设备信息添加成功',
                type: 'success'
              });
              }
              this.drawer = false;
              this.getDeviceList()
            } else {
              this.$notify.error({
                title: "错误",
                message: "设备信息添加失败",
              });
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  
    // //重置校验
    // resetForm(formName) {
    //   this.$refs[formName].resetFields();
    // },
  },
};
</script>
<style lang="scss" scoped>
.device {
  padding: 5px;
  .header {
    margin-bottom: 10px;
  }
}
</style>